<%--
  Created by IntelliJ IDEA.
  User: G
  Date: 2019/5/13
  Time: 21:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="DTO.LocaldataDTO" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改头像</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <style>
        .clip{
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
        .button1{
            display: inline-block;
            width: 96px;
            height: 32px;
            padding: 8px 16px;
            margin: 8px;
            text-align: center;
            color: #ffffff;
            background: #53e3a6;
            border-radius: 5px;
            cursor: pointer;
            letter-spacing: 1px;
            border:solid 1px;
            border-color: white;
            line-height: 10px;
        }
    </style>
</head>
<body>
<jsp:useBean id="user" class="DTO.LocaldataDTO"/>
<%
    LocaldataDTO localdataDTO=(LocaldataDTO)session.getAttribute("localdataDTO");
%>
<div class="htmleaf-container">
    <div class="wrapper">
        <div class="container">
            <div class="Content-Main" style="margin-top: -90px">
                <h1 style="text-align: center;">修改个人头像</h1>
                <div style="padding-top: 0px;padding-bottom: 0px;">
                    <form method="post" action="/upload" enctype="multipart/form-data" style="padding-top: 0px;height: 40px" >
                        <button type="submit" class="button" style="position: absolute;left: 246px">完成</button>
                        <div id="dd" style="height: 200px;width: 200px;margin-top: 50px;float: left;margin-left: 195px ;background-image:url(picture/inserst.jpg);background-repeat: no-repeat;background-size: 200px 200px;" ></div>
                        <div style="float: left;width: 95px;margin-left: 245px;margin-top: 10px">
                            <input type="file"  name="file" id="selectFile" class="clip"  onchange="javascript:setImagePreviews();" accept="image/png, image/jpg" required="required"/>
                            <label for="selectFile" class="button1">更换</label>
                        </div>
                        <div style="float:right;padding-top:80px"></div>
                    </form>

            </div>
        </div>
    </div>
    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

<script>
    function setImagePreviews(avalue) {
        var docObj = document.getElementById("selectFile");
        var dd = document.getElementById("dd");
        dd.innerHTML = "";
        var fileList = docObj.files;
        for (var i = 0; i < fileList.length; i++) {
            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";
            var imgObjPreview = document.getElementById("img"+i);
            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '200px';
                imgObjPreview.style.height = '200px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
            }
            else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
                //必须设置初始大小
                localImagId.style.width = "200px";
                localImagId.style.height = "200px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
        return true;
    }

</script>
</body>
</html>


